<div class="search-user-container" (click)="stopPropagation($event)">
    <div class="search-user-input-wrap float-right">
        <input spellcheck="false" #searchInput [(ngModel)]="searchKeyword" spellcheck="false" class="search-user-input input-focus" type="text" placeholder="搜索">
        <span (click)="clearInput()" *ngIf="searchUserResult.isSearch"></span>
        <p></p>
    </div>
    <p class="search-user-no-result" *ngIf="searchUserResult.isSearch && searchUserResult.result.singleArr.length === 0 && searchUserResult.result.groupArr.length === 0">找不到匹配的结果</p>    
    <perfect-scrollbar class="search-user-result" *ngIf="searchUserResult.isSearch && (searchUserResult.result.singleArr.length > 0 || searchUserResult.result.groupArr.length > 0)">
        <div class="search-user-show" *ngIf="searchUserResult.result.singleArr.length > 0">
            联系人
            <span class="float-right" *ngIf="searchUserResult.result.singleArr.length > 4" (click)="singleShowAll()">{{singleShowText}}</span>
        </div>
        <ul class="search-user-single" *ngIf="searchUserResult.result.singleArr.length > 0" [ngStyle]="{'max-height': singleHeight}">
            <li class="display-flex" *ngFor="let item of searchUserResult.result.singleArr" [title]="item.name.indexOf(searchKeyword) != -1 ? item.name: item.nickName">
                <div class="search-user-avatar-container">
                    <img avatarLoad [avatarError]="3" [src]="item.avatarUrl" alt="">
                </div>
                <span class="search-user-name flex-1" [title]="item.memo_name && item.memo_name.indexOf(searchKeyword) !== -1 ? item.memo_name : (item.nickName && item.nickName.indexOf(searchKeyword) !== -1 ? item.nickName : (item.username ? item.username : item.name))">{{item.memo_name && item.memo_name.indexOf(searchKeyword) !== -1 ? item.memo_name : (item.nickName && item.nickName.indexOf(searchKeyword) !== -1 ? item.nickName : (item.username ? item.username : item.name))}}</span>
                <label class="search-member-label">
                    <input spellcheck="false" type="checkbox" [ngModel]="item.checked" [disabled]="item.disabled" (click)="changeChecked(item)">
                    <b></b>
                </label>
            </li>
        </ul>
        <div class="search-user-show" *ngIf="searchUserResult.result.groupArr.length > 0">
            群组
            <span class="float-right" *ngIf="searchUserResult.result.groupArr.length > 4" (click)="groupShowAll()">{{groupShowText}}</span>
        </div>
        <ul class="search-user-group" *ngIf="searchUserResult.result.groupArr.length > 0" [ngStyle]="{'max-height': groupHeight}">
            <li class="display-flex" *ngFor="let item of searchUserResult.result.groupArr" [title]="item.name.indexOf(searchKeyword) != -1 ? item.name: item.nickName">
                <div class="search-user-avatar-container">
                    <img avatarLoad [avatarError]="4" [src]="item.avatarUrl" alt="">
                </div>
                <span class="search-user-name flex-1">{{item.name}}</span>
                <label class="search-member-label">
                    <input spellcheck="false" type="checkbox" [ngModel]="item.checked" (click)="changeChecked(item)">
                    <b></b>
                </label>
            </li>
        </ul>
    </perfect-scrollbar>
</div>